<template>
  <n-switch
    v-model:checked="localChecked"
    :disabled="disabled || loading"
    :loading="loading"
    :size="size"
    v-bind="$attrs"
    @update:checked="handleUpdate"
  >
    <template #checked>
      <slot name="checked" />
    </template>
    <template #unchecked>
      <slot name="unchecked" />
    </template>
  </n-switch>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  disabled: Boolean,
  loading: Boolean,
  size: {
    type: String,
    default: 'medium',
    validator: (value) => ['small', 'medium', 'large'].includes(value)
  }
})

const emit = defineEmits(['update:modelValue'])

const localChecked = ref(props.modelValue)

watch(() => props.modelValue, (newValue) => {
  localChecked.value = newValue
})

const handleUpdate = (checked) => {
  localChecked.value = checked
  emit('update:modelValue', checked)
}
</script>